<template>
	<view class="list-order">
		<view class="sd_box" v-for="(order, index) in ordersList" :key="index" @click="toDetail(order.id)">
			<!-- 头像部分-->
			<view class="sd_ft_lt">
				<view class="sd_ft_lt_img">
					<image :src="order.userinfo.avatar_text"></image>
					<view class="sd_ft_lt_sd">
						<view class="sd_ft_lt_sd_tit">
							{{order.name}}
						</view>
						<view class="sd_order_time">
							{{order.gettime_text}}
						</view>
					</view>
				</view>

				<view :class="['rt_help', getBackgroundClass(order.state,order.typeid).color]">
					{{ getBackgroundClass(order.state,order.typeid)?.text }}
				</view>

			</view>

			<!-- 中间需求部分-->
			<view class="order-need">
				需求：{{ order.need }}
			</view>

			<view class="order-need" v-if="order.remake">
				备注：{{ order.remake }}
			</view>


			<!-- 流程步骤条 -->

			<view class="address_qz" v-if="order.state != 3">
				<view class="address_qz_qi" v-if="order.pickadd">
					<view class="add_ti">起</view>
					<view class="add_ti_pick">{{ order.pickadd }}</view>
				</view>
				<view class=".order_steps_line" v-if="order.pickadd && (order.address || order.kdsj)">
					|
				</view>
				<view class="address_qz_qi">
					<view class="add_ti" style="color: white; background-color: #3c91ff;"
						v-if="order.address || order.kdsj">
						终
					</view>
					<view class="add_ti_pick order_need" v-if="order.address">
						{{ order.kdsj }} {{order.address}}
					</view>
					<view class="add_ti_pick order_need" v-if="order.kdsj">
						{{ order.kdsj }} {{order.address}}
					</view>
				</view>

			</view>


			<view class="address_qz" v-else>
				<view class="address_qz_qi">
					<view class="add_ti_wu">
						<text class="add_ti_wu_text"></text>
					</view>
					<view class="add_ti_pick" style="color: #3c91ff;">
						位置信息已隐藏
					</view>
				</view>
			</view>


			<!-- 底部按钮 -->

			<view class="parent_container">
				<view class="parent_container_button">
					<view class="rt_help">
						{{ order.state != 3 && order.dele==1 ? `￥${order.endprice?order.endprice:order.price}` : '' }}
					</view>

					<view class="rt_help" style="background-color: #2ab54b; color: white; margin-left: 20rpx; "
						v-if="order.state == 1 && order.isEdit !=1 && order.dele==1" @click="orderOn(order.id,index)">
						未接单
					</view>

					<view class="rt_help" style="background-color: red; color: white; margin-left: 20rpx; "
						v-if="order.state == 1 && order.isEdit ==1 && order.dele==1"
						@click="orderOnDel(order.id,order.typeid,index)">
						取消订单
					</view>

					<view class="rt_help" style="background-color: #999; color: white; margin-left: 20rpx; "
						v-if="order.dele==2">
						已取消
					</view>

					<view class="rt_help" style="background-color: #3c91ff; color: white; margin-left: 20rpx; "
						v-if="order.state == 2 && order.dele==1">
						已接单
					</view>
					<view class="rt_help" style="background-color: #fe9e17; color: white; margin-left: 20rpx;"
						@click="willOrderFinish(order.id,order.typeid,index)"
						v-if="order.state == 2 && order.getisEdit ==2 && order.dele==1">
						即将到达
					</view>
					<view class="rt_help" style="background-color: #fe9e17; color: white; margin-left: 20rpx; "
						@click="orderFinish(order.id,order.typeid,index)"
						v-if="(order.state == 2||order.state == 4) && order.getisEdit ==1 && order.dele==1">
						确认收货
					</view>

					<view class="rt_help" style="background-color: #fe9e17; color: white; margin-left: 20rpx; "
						@click="orderFinish(order.id,order.typeid,index)"
						v-if="order.state == 4 && order.getisEdit ==2 && order.dele==1">
						确认收货
					</view>



				</view>



			</view>




		</view>
	</view>
</template>

<script>
	import {
		getSetOrder,
		postfinishOrder,
		postcancelOrder,
		orderComming
	} from "@/api/index.js";
	export default {
		name: "ppl-orderList",
		props: {
			ordersList: Array,
			firstactive: Number,
			typeactive: Number,
		},
		data() {
			return {

			};
		},
		methods: {
			//取消订单
			orderOnDel(id, typeid, index) {
				let note = this.ordersList[index].need ? this.ordersList[index].need : this.ordersList[index].name
				let title = this.ordersList[index].name
				const that = this
				uni.showModal({
					title: '取消订单',
					content: note,
					showCancel: true,
					success: function(res) {
						if (res.confirm) {
							postcancelOrder({
								orderid: id,
								typeid: typeid
							}).then(res => {
								if (res.code == 1) {
									if (that.firstactive != 2) {
										that.ordersList.splice(index, 1);
									} else {
										that.ordersList[index].dele = 2
									}


								} else {
									uni.showToast({
										title: res.msg,
										icon: 'none',
									})
								}
								console.log(res)
								console.log(index)
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});


			},
			//即将到达
			willOrderFinish(orderid, typeid, index) {
				const that = this
				uni.showModal({
					title: '即将到达吗?',
					showCancel: true,
					success: function(res) {
						orderComming({
							orderid,
							typeid
						}).then(res => {
							if (res.code == 1) {
								that.ordersList[index].state = 4
							} else {
								uni.showToast({
									title: res.msg,
									icon: 'none',
								})
							}
						})

					}
				})
			},
			//确认收货
			orderFinish(id, typeid, index) {
				console.log(this.ordersList)
				let note = this.ordersList[index].need ? this.ordersList[index].need : this.ordersList[index].name
				const that = this
				console.log(note)
				uni.showModal({
					title: '确认收货',
					content: note,
					showCancel: true,
					success: function(res) {
						if (res.confirm) {
							postfinishOrder({
								orderid: id,
								typeid: typeid
							}).then(res => {
								if (res.code == 1) {
									that.ordersList[index].state = 3
								} else {
									uni.showToast({
										title: res.msg,
										icon: 'none',
									})
								}

								console.log(res)
								console.log(index)
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			},
			getBackgroundClass(state, typeid) {
				let obj = null
				if (typeid == 1) {
					obj = {
						0: {
							color: 'bg-wait',
							text: '待支付'
						},
						1: {
							color: 'bg-wait',
							text: '待帮助'
						},
						2: {
							color: 'bg-helped',
							text: '已接单'
						},
						3: {
							color: 'bg-completed',
							text: '已完成'
						},
						4: {
							color: 'bg-completed',
							text: '即将到达'
						}
					}
				} else {
					obj = {
						0: {
							color: 'bg-wait',
							text: '待付款'
						},
						1: {
							color: 'bg-wait',
							text: '待自提'
						},
						2: {
							color: 'bg-helped',
							text: '待发货'
						},
						3: {
							color: 'bg-completed',
							text: '待收货'
						},
						4: {
							color: 'bg-completed',
							text: '待评价'
						},
						5: {
							color: 'bg-completed',
							text: '已完成'
						},
						6: {
							color: 'bg-completed',
							text: '已取消'
						}
					}
				}

				return obj[state];
			},
			//接单
			orderOn(order, index) {
				getSetOrder({
					id: order
				}).then(res => {
					if (res.code == 1) {
						this.ordersList[index].state = 2
						this.ordersList[index].getisEdit = 2
					} else {
						if(res.code==20){
							uni.showToast({
								title: res.msg,
								duration: 1000,
							})
							
							setTimeout(function() {
								uni.navigateTo({
									url:'/package/pages/shimingrenzheng/shimingrenzheng'
								})
							}, 1100)
						}else if(res.code==30){
							uni.showToast({
								title: res.msg,
								duration: 1000,
							})
							setTimeout(function() {
								uni.navigateTo({
									url:'/package/pages/reqOrder/reqOrder'
								})
							}, 1100)
							
						}else{
							uni.showToast({
								title: res.msg,
								icon: 'none',
							})
						}
						
					}

					console.log(res)
					console.log(index)
				})
			},
			//订单详细
			toDetail(order_id) {
				uni.navigateTo({
					url:'/pages/order/detail?id=' + order_id +'&typeid=' + this.typeactive
				})
			}
		}
	}
</script>

<style scoped>
	.list-order {

		padding: 230rpx 30rpx 0 30rpx;
	}

	.sd_box {
		padding: 30rpx;
		margin-top: 20rpx;
		border-radius: 20rpx;
		border: 2rpx solid #e8f2ff;
		box-shadow: 0rpx 5rpx 10rpx 0rpx #f6f6f6;
	}

	.sd_ft_lt {
		display: flex;
		justify-content: space-between;
	}

	.sd_ft_lt_img {
		display: flex;
	}

	.sd_ft_lt_img image {
		width: 100rpx;
		height: 100rpx;
		border-radius: 100rpx;
	}

	.sd_ft_lt_sd {
		margin-left: 20rpx;
		align-items: center;
		gap: 20rpx;
	}

	.sd_ft_lt_sd_tit {
		font-weight: bold;
		font-size: 34rpx;
		margin-bottom: 24rpx;
	}

	.sd_order_time {
		color: #999999;
		font-size: 28rpx;
	}

	.rt_help {
		width: 160rpx;
		height: 60rpx;
		border-radius: 10rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 25rpx;
	}

	.bg-wait {
		background-color: #e9ffee;
		color: #2ab54b;
	}

	.bg-helped {
		background-color: #edf5ff;
		color: #3c91ff;
	}

	.bg-completed {
		background-color: #fff5e7;
		color: #fe9e17;
	}

	.order-need {
		margin-top: 20rpx;
		font-size: 32rpx;
		font-weight: bold;
	}

	.address_qz {
		margin-top: 30rpx;
		font-size: 30rpx;
	}

	.address_qz_qi {
		display: flex;
		color: #2ab54b;

	}

	.add_ti {
		color: white;
		background-color: #2ab54b;
		width: 50rpx;
		height: 50rpx;
		border-radius: 25rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.add_ti_pick {
		margin-left: 20rpx;
		height: 50rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.order_need {
		color: #3c91ff;
		font-size: 30rpx;
	}

	.order_steps_line {
		margin: 5rpx 0;
		color: #ccc;
		width: 50rpx;
		text-align: center;
	}

	.add_ti_wu {
		background-color: #d8e9ff;
		width: 50rpx;
		height: 50rpx;
		border-radius: 25rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 30rpx;
	}

	.add_ti_wu_text {
		background-color: #3c91ff;
		width: 25rpx;
		height: 25rpx;
		border-radius: 12rpx;

	}

	.parent_container {
		display: flex;
		justify-content: flex-end;
	}

	.parent_container_button {
		display: flex;
	}
</style>